<template>
  <view class="safe-bottom">
    <!-- 头部及背景色 -->
    <backdrop />
    <navigation back backColor title="我的关注" />

    <view class="container">
      <!-- 骨架屏 -->
      <view class="skeleton-view" v-if="loading && !list.length">
        <view
          class="skeleton-item"
          v-for="(item, index) in Array(3)"
          :key="index"
        >
          <u-skeleton rows="3" loading :title="false" />
        </view>
      </view>

      <view class="container" v-else>
        <image
          src="@/static/image/common/default.png"
          mode="widthFix"
          class="default-png"
          v-if="!list.length"
        />
        <follow-item v-for="(item, index) in list" :key="index" />
      </view>

      <u-loadmore
        :status="loadStatus"
        :nomoreText="totalPage ? '没有更多了' : '还没有关注的人哦'"
      />
    </view>
  </view>
</template>

<script>
import followItem from "./components/followItem";
import { getFollowList } from "@/api/follow";

export default {
  components: {
    followItem,
  },
  data() {
    return {
      page: 1,
      list: [],
      loading: false,
      totalPage: 0,
    };
  },
  computed: {
    loadStatus() {
      let str = this.loading
        ? "loading"
        : this.totalPage <= this.page
        ? "nomore"
        : "loadmore";
      return str;
    },
  },
  onPullDownRefresh() {
    this.refresh();
  },
  onReachBottom() {
    if (this.totalPage <= this.page) return;
    this.page += 1;
    this.getFollowList();
  },
  onLoad() {
    this.refresh();
  },
  methods: {
    refresh() {
      this.list = [];
      this.page = 1;
      this.getFollowList();
    },
    async getFollowList() {
      this.loading = true;
      const { data, code } = await getFollowList({
        page: this.page,
      });
      this.loading = false;
      uni.stopPullDownRefresh();
      if (code !== 200) return;
      this.list = this.list.concat(data.list);
      this.totalPage = data.totalPage;
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  position: relative;
}

.default-png {
  width: 200px;
  margin: 80px auto 36px;
  display: block;
}

.skeleton-view {
  padding: 0 16px;

  .skeleton-item {
    padding: 16px;
  }
}
</style>